@import "variable";
@import "normalize";
@import "mixins";

// 页面整体左右边距
html, body {
  height: 100%;
}

//一行隐藏
.one-line-hide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//两行隐藏
.two-line-hide {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

// 滚动条隐藏
.scrollbar-hide {
  &::-webkit-scrollbar {
    display: none
  }
}

// 卡片
.card {
  box-shadow: 0 2px 8px 0 rgba(126, 150, 199, 0.16);
  border-radius: 8px;
}

// 默认button
.button {
  button {
    width: 100%;
    background: $theme-blue;
    border-radius: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: $theme-white;
    line-height: 22px;
    padding: 9px 0;
  }
}

// 不可点击下的button
.no-click {
  button {
    background: $theme-border-color;
    color: $theme-gray;
  }
}

// 白底 蓝字 蓝边框
.button-white {
  button {
    width: 100%;
    background: $theme-white;
    border-radius: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: $theme-blue;
    line-height: 22px;
    padding: 9px 0;
    border: 1px solid $theme-blue;
  }
}

//带色块的title
//调用的地方 根据情况设置对应的 font-size line-height 即可
.color-lump-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 25px;
  position: relative;
  padding-left: 8px;
  display: inline;

  &::after {
    content: "";
    width: 4px;
    height: 80%;
    background: $theme-blue;
    border-radius: 2px;
    position: absolute;
    left: 0;
    top: 5%;
  }
}

//垂直布局 header 头部固定 section 填充 滚动
.vertical-layout {
  height: 100%;
  display: -webkit-box;
  flex-direction: column;

  section {
    background: $theme-page-bg;
    -webkit-box-flex: 1;
    overflow-y: scroll;
  }
}

//两端对齐布局
.space-between {
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 16px;

    label {
      color: $theme-gray;
    }
  }

  li:last-child {
    margin-bottom: 0;
  }
}

// 输入框提示
.placeholder {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  font-family: PingFangSC-Regular;

  &::placeholder {
    color: $theme-gray;
  }
}

// 左右布局 右边两端对齐
.flex-stretch {
  display: flex;

  .left {
    margin-right: 12px;
  }

  .right {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
